<template>
  <div class="case-edit-page">
    <div class="form-card">
      <div class="form-section-title"><span class="section-bar"></span>基本信息</div>
      <el-form :model="form" label-width="100px">
        <el-form-item label="案件名称">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="案件状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="案件类型">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="form.applicantName" />
        </el-form-item>
      </el-form>
    </div>
    <div class="form-card">
      <div class="form-section-title"><span class="section-bar"></span>案件描述</div>
      <el-form :model="form" label-width="0">
        <el-form-item>
          <el-input type="textarea" v-model="form.description" :rows="6" />
        </el-form-item>
      </el-form>
    </div>
    <div class="form-actions">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { mockDatabase } from '@/mock/modules/case'

const route = useRoute()
const router = useRouter()
const form = ref({})

const statusOptions = [
  { value: 0, label: '待审核' },
  { value: 1, label: '审核通过' },
  { value: 2, label: '审核未通过' },
  { value: 3, label: '已结案' },
  { value: 4, label: '已撤回' }
]
const typeOptions = [
  { value: 'CIVIL', label: '民事案件' },
  { value: 'CRIMINAL', label: '刑事案件' },
  { value: 'ADMINISTRATIVE', label: '行政案件' },
  { value: 'OTHER', label: '其他' }
]
function goBack() {
  router.back()
}
function save() {
  // 这里只做前端演示，实际应调用API
  alert('保存成功（mock）')
  goBack()
}
onMounted(() => {
  const id = route.params.id
  // 优先从localStorage获取allCases
  const cases = JSON.parse(localStorage.getItem('allCases') || '[]')
  const found = cases.find(item => String(item.id) === String(id))
  if (found) form.value = { ...found }
})
</script>
<style scoped>
.case-edit-page {
  padding-top: 48px;
  background: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-card {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto 32px auto;
  background: none;
  box-shadow: none;
  display: flex;
  justify-content: flex-start;
  padding: 0 40px;
}
.form-section-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  color: #222;
  letter-spacing: 1px;
}
.section-bar {
  display: inline-block;
  width: 5px;
  height: 24px;
  background: #ffb300;
  border-radius: 2px;
  margin-right: 12px;
}
.form-actions {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto 32px auto;
  background: none;
  box-shadow: none;
  display: flex;
  justify-content: flex-start;
  padding: 0 40px;
}
.el-button {
  border-radius: 8px !important;
  min-width: 80px;
  font-size: 16px;
  margin-right: 16px;
}
.el-button:last-child {
  margin-right: 0;
}
</style> 